body{
    background-color: wheat;
}
.tonglan{
    background-color: #ccc;
}
.header{
   height: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   
}
.header>.yi{
    width: 450px; 
    display: flex;
    justify-content: space-around;
    
}
/* .header > #oon{
    width: 100px;
} */
.yi > button {
    background-color: transparent;
    cursor: pointer;
  }
.yi > .on,
.yi > .off{
    visibility: hidden;;
}
.yi > .on.active,
.yi > .off.active{
    visibility: visible;
}
.header>.yi>li,
.header>.yi>a{
    /* width: 100px; */
    display: flex;
    float: left; 
    font-size: 14px;
    text-decoration: none;
    
}

.header>.er{
    margin-left: 40px;
  width: 750px;
  float: right;
}
/* .er>li:nth-child(2){
    color: red;
} */
.header>.er>li{
    color: black;
    font-size: 14px;
    display: flex;
    width: 90px;
    float: left;
    justify-content: space-around;
}

.yili{
    position: relative;
}
.yili>ol{
    display:none;
    position: absolute;
    top:30px;
    right: 20px;
    width: 60px;
    background-color: white;
}
.yili>ol>li{
    height: 20px;
}
.yili:hover>ol{
    display: block;
}

.yi>:nth-child(2){
    color: red;
}
.yi>li:not(:first-child):hover{
    color: red;
}
.er>li:not(:first-child):hover{
    color: red;}
.er>.tb{
    position: relative; 
}

.er>.tb>ol{
    position:absolute;
    display: none;
    top:30px;
    right: 20px;
    background-color: white;
    width: 60px;
}
.er>.tb:hover>ol{
    display: block;
} 
 #last{
    position: relative;
    z-index: 999;
   
}
 #last>.d1{
    position: absolute;
    min-height:258px;
    width: 1190px;
    top: 27px;
    right: 0;
    display: none;
    background-color: white;
    }
   
#last:hover>.d1{
    display: block;
    color: black;
    
}
    #last>.d1>div>ul>li:hover{
        background-color: blue;
    }
#last>.d1>div{
    width: 25%;
    float: left;
}   
#last>.d1 p{
    margin-left: 20px;
    font-size: 30px;
}
#last>.d1 ul{
    margin: 20px 10px ;
    float: left;
}
#last>.d1 ul>li{
    padding: 5px;
}
/* 第二栏 */
.tonglan2{background-color: orange;}
.second{
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-evenly;
}
.second>div:nth-child(1){
    width:80px ;
    height: 80px;
}
.second>.yifu{   
    width: 209px;
    height: 75px;  
     background-image: url(../images/1.png);
    background-repeat: no-repeat;
    
}
.second .yifu_zuo{
    margin-left: 20px;
    width: 90px;
    float: left;
    color: white;
}
.second .yifu_zuo>h3{
    margin-top: 10px;
    height: 28px;
    line-height: 28px;
}
.second .yifu_zuo>h5{
    height: 16px;
    line-height: 20px;
}
.second .yifu_you{
    float: right;
    width: 52px;
    height: 52px;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 15px;
}
.second .yifu_you>img{
    width: 100%;
    height: 100%;
}
/* 第三栏 */
/*  */
.search_box>input, button {  
    border: none;
    outline: none;
    box-sizing: border-box;
   
  }

  .search_box> .ul {
    position: absolute;
    width: 400px;
    border: 1px solid #333;
    border-top: none;
    left: 72px;
    top: 40px;
    box-sizing: border-box;
    display: none;
    background-color: white;
    z-index: 9000;
    
  }
  .search_box> .ul > li {
    text-align: left;
    height: 22px;
    line-height: 22px;
    font-size: 18px;
    cursor: pointer;    
   
  }

  .search_box > .ul > li:hover {
    background-color: #ccc;
    color: #fff;
  }
/* */
.search{
	position:sticky;
	top:0px;
    height: 88px;
    background-color:white;
    z-index: 1000;
    /* position: relative; */
}
.search>.gif{
    width: 120px;
    height: 88px;
    float: left;
    margin-right: 200px;
}
.search_box{
    position: relative;
    margin-left: 200px;
    float: left;
    width: 554px;
    /* height: 40px; */
    margin:22px auto 0;
    display: flex;
    text-align: center;
    border: 1px solid orange;
    border-radius: 30px;
    
}
.search_left{
    width: 72px;
    height: 36px;
    line-height: 36px;
    margin: auto;
    border-right: 1px solid gray;
    
}
.search_box>input{
    width: 400px;
    height: 40px;
    display: block;
    border-radius: 30px;
    /* background-color: pink; */
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
    position: relative;
}
.search_right{
    height: 36px;
    line-height: 36px;
    margin: auto;
    flex: 1;
    background-color: #FF4200;
    border-radius: 20px;
    cursor: pointer;
}
.search>ul{
    position: relative;
    left: -160px;
    width: 554px;
    height: 18px;
    /* background-color: aqua; */
    margin: 0 auto;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
 
}
.search_rt{
    float: right;
    width: 70px;
    height: 70px;
    margin-top: -70px;
    margin-right: 70px;
    
}
/* 第四轮 */
.si{
    height: 30px; 
}
.si>ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 30px;
    margin-top: 10px;
    font-size: 14px;
}
.si>ul>li:nth-child(1){
    margin-right: 20px;
    font-size: 20px;
    color: orange;
    margin-left: 60px;
}
/* 第五轮 */
.wu{
    margin-top: 10px;
}
.wu>.wu_zuo{  
    width: 200px;
    height: 526px;
    /* background-color: orange; */
    float: left;
    
    
}
.wu>.wu_zuo>ul{
    position: relative;
}
.wu>.wu_zuo>ul>li{
    margin: 15px 10px;
    font-size: 14px;
   
}
.wu>.wu_zuo>ul>li>span{
  
    margin-right: 20px;
   float: right;

}
.wu_zuo_div{
    position:absolute;
    width: 700px;
    height: 525px;
    background-color: white;
    display: none;
    top: -15px;
    left: 200px;
    z-index: 9999;
}
.wu_zuo>ul>li:hover>.wu_zuo_div{
    display: block;
}
.wu_zuo_div>p{
    font-size: 20px;
    color: orangered
}
.wu_zuo_div>ul{
    width: 700px;
    display: flex;
}
.wu_zuo_div>ul>li{
    background-color: aquamarine;
    font-size: 15px;
    width: 50px;
    cursor: pointer;
    margin: 20px 20px;
   line-height: 30px;
    height: 30px;
}
/* 轮播图 */
.banner > ul {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .banner > ul > li {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    color: #fff;
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    opacity: 0;

    transition: opacity .5s linear;
  }

  .banner > ul > li.active {
    opacity: 1;
  }

  .banner > ol {
    width: 200px;
    height: 30px;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    left: 30px;
    bottom: 30px;
    border-radius: 15px;

    display: flex;
    /*
      justify-content: 主轴对齐方式
        space-between: 两端对齐
        space-around: 环绕
        space-evenly: 绝对均分(安卓不支持, ios 支持)
    */
    justify-content: space-evenly;
    align-items: center;
  }

  .banner > ol > li {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
  }

  .banner > ol > li.active {
    background-color: red;
  }

  .banner:hover > div {
    display: flex;
  }

  .banner > div {
    width: 30px;
    height: 40px;
    background-color: rgba(0, 0, 0, .2);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;

    display: none;
  }

  .banner > div:hover {
    background-color: rgba(0, 0, 0, .5);
  }

  .banner > div.prev {
    left: 0;
  }

  .banner > div.next {
    right: 0;
  }

.wu_center{
    float: left;
    width: 700px;
    height: 526px;
    /* background-color: rebeccapurple; */
}
/* l轮播图 */
.wu_center .shang_zuo{
    float: left;
    width: 520px;
    height: 280px;
    /* background-color: saddlebrown; */
    position: relative;
}
.wu_center .shang_you{
    float: right;
    width: 160px;
    height: 280px;
    /* background-color: green; */
}
.wu_p1{
    float: left;
    width: 520px;
    height: 24px;
    /* background-color: hotpink; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.wu_p2{
    float: right;   
    width: 160px;
    height: 30px;
    background-color: khaki;
    font-size: 12px;
    color: gray;
    line-height: 30px;
   
}

.xia>.xia_zuo{
    float: left;
    width: 251px;
    height: 190px;
    background-color: firebrick;
    margin-top: 10px;
    margin-left: 10px;
   
}
.xia>.xia_center{
    float: left;
    width: 251px;
    height: 190px;
    background-color: aqua;
    margin-top: 10px;
    margin-left: 10px;
}
.xia>.xia_you{
    float: right;
    width: 160px;
    height: 200px;
    background-color: greenyellow;
}
/* 右 */
.wu_rt{
    width: 290px;
    height: 526px;;
    /* background-color: green; */
    float: right;
}
.wu_rt-s{
    width: 290px;
    height: 110px;
    /* background-color: red; */
}
.wu_rt-s>.p1{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}

.wu_rt-s>.p2{
    text-align: center;
    font-size: 12px;
    height: 17px;
    margin-top: 10px;
}
.wu_rt-s>.p3{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
    margin-top: 5px;
}
.wu_rt-s>.p3>button{
    width: 92px;
    background-color: orangered;    
    cursor: pointer;
    color: white;
    height: 25px;
}
.wu_rt-zhong{
    width: 290px;
    height: 65px;
   margin-top: 20px;
}
/* 选项卡 */
.box {
    width: 290px;
    height: 80px;
    /* border: 2px solid #333; */
    /* margin: 30px auto; */
    display: flex;
    flex-direction: column;
  }

 .wu_rt>.box > ul {
    height:40px;
    display: flex;
  }

  .wu_rt>.box > ul > li {
    flex: 1;
    height: 100%;
    background-color: skyblue;
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .wu_rt>.box > ul > li.active {
    background-color: orange;
  }

  .wu_rt>.box > ol {
    flex: 1;
    position: relative;
  
  }

  .wu_rt>.box > ol > li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content:left;
    align-items: center;
    background-color: purple;
    color: #fff;
    font-size: 12px;
    display: none;
    
  }
  .wu_rt>.box > ol > li.active {
    display: flex;
  }
/* 第六栏 */
.liu{
    height: 24px;
    font-size: 24px;
    display: flex;
 
}
.liu>img{
    width: 65px;
    height: 20px;
    margin:8px;
}
.liuxia{
    width: 215px;
    margin-top: 20px;
    height: 310px;

    /* background-color: pink; */
}
.liuxia>.p1{
    width: 215px;
    border-radius: 15px;
    overflow: hidden;
   
}
.liuxia>img{
    width: 215px;
    height: 251px;
}
.liu>.p3,
.liu>.p2{
    height: 16px;  
}
.liuxia>.p2{
    font-size: 16px;
    font-weight: 700;
    margin-top: 10px;
    color: #3c3c3c;
}
.liuxia>.p3{
    font-size: 14px;
    margin-top: 20px;
    color:#999999 ;
    text-overflow: ellipsis;
    
    overflow: hidden;
    white-space: nowrap;
}
.liuXiabox{
    display: flex;
  
    justify-content: space-between;
    
}
.box2{
    width: 290px;
    height:155px ;
    /* background-color: red; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.box2>.bx{
    /* width: 70px; */
    width: 25%;
    /* height: 64px; */
    height: 50%;
    font-size: 30px;
    text-align: center;
    border: 1px solid gray;
    display: block;
    box-sizing: border-box;
    padding-top: 20px;
    border-left: none;  
    color: red;
}
.box2>.bx>p{
    color: black;
    font-size: 12px; 
}
.app{
    width: 290px;
    height: 30px;
    /* background-color: blue; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.app>.sp1{
    font-size: 20px;
    font-weight: 700;

}
.app>.sp2{
    font-size: 12px;
    color: #3c3c3c;
}
.app_xia{
    display: flex;
    width: 290px;
    height: 50px;
    justify-content: space-around;
    align-items: center;
    /* background-color: rebeccapurple; */
}
.app_xia>div{
    /* width: 32px;
    height: 32px; */
    font-size: 32px;    
}
.qi{
    /* background-color: rebeccapurple; */
    height: 130px;
    justify-content: space-between;

    display: flex;
    margin-bottom: 10px;
}
.qi>div{
    border-radius:15px;
    overflow: hidden;
}
/* 第八栏 */
.ba_tu{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.ba_tu>.tu{
    margin-top: 20px;
    width: 230px;
    height: 326px;
    position: relative;
    /* background-color: rebeccapurple; */
}
.tu>.zhe{
    width: 230px;
    height: 326px;
    /* opacity: 0.5; */
    background-color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top:0 ;
    left:0;
    display: none;
    transition: all 5s linear;
}
.tu:hover>.zhe{ 
    display: block;
}
.tu>.zhe>button{
   color: white;
   background-color: #ff5000;
    width: 200px;
    border-radius: 30px;
    height:34px ;
    font-size: 18px;  
    text-align: center;
    line-height: 34px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.ba_tu>.tu>.xihuan{
    height: 215px;
    border-radius: 15px;
    overflow: hidden;
}
.ba_tu>.tu>h4{
    font-weight: normal;
    margin-top: 9px;
    line-height: 22px;
    margin-bottom: 20px;
}

.ba_tu>.tu>p>.price{
    font-size: 18px;
    color: red;
   
}
.ba_tu>.tu>p>.pople{
    margin-left: 10px;
    color: gray;
    font-size: 14px;
}
/* 楼层 */
/* ul > li {
    height: 500px;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
  }
  ul > li > p {
    height: 60px;
    font-size: 50px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  ul > li > div {
    flex: 1;
    background-color: hotpink;
  } */
  .lou_ol>ol {
    width: 50px;
    height: 254px;
    border-top: 1px solid #333;
    border-left: 1px solid #333;
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    
  }
  .lou_ol>ol > li {
    width: 50px;
    height: 50px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    cursor: pointer;
    
    text-align: center;
    font-size: 20px;
    
  }
  .lou_ol>ol > li.active {
    background-color: skyblue;
    color: #fff;
  }
  .lou_ol>ol > li:hover {
    background-color: orange;
    color: #fff;
  }
  .dibu {
    width: 1519.2px;
    height: 300px;
    
    background-color: white;
} 
.dibu > .banxin {
  margin: 0 auto;
  width: 1190px;
}
.dibu > .banxin > .p1 {
    width: 1190px;
    height: 62px;
    margin-bottom: 8px;
    line-height: 27px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    font-size: 12px;
    color: #9c9c9c;
    line-height: 27px;
}
.dibu > .banxin > .p1 > span {
  margin: 0 4px;
}
.dibu > .banxin >.p1 > span > b {
  font-weight: 400;
  color: #ddd;
  margin-left: 6px;
}
.dibu >.banxin > .p2 {
    width: 1190px;
    height: 26px;
    padding-bottom: 8px;
    overflow: hidden;
    font-size: 12px;
    line-height: 26px;
}
.dibu > .banxin >.p2 > span {
    margin-right: 5px;
    color: #6c6c6c;
}
.dibu > .banxin >.p2 > em {
  color: #9c9c9c;
  margin-left: 30px;
  font-style: normal;
}
.dibu >.banxin > .p2 > b {
  margin: 0 3px;
  font-weight: 400;
  color: #ddd;
}
.dibu >.banxin > .p3 {
  padding-bottom: 8px;
  overflow: hidden;
  font-size: 12px;
  height: 26px;
  line-height: 26px;
}
.dibu > .banxin >.p3 > span {
  margin: 0 4px;
  color: #9c9c9c;
}
.dibu > .banxin >.p3 > span > b {
  margin-left: 6px;
  font-weight: 400;
  color: #ddd;
}
.dibu > .banxin >.p3 > span:nth-child(4) {
  margin: 0 4px;
  color: #9c9c9c;
}
.dibu > .banxin >.p4 {
  padding-bottom: 8px;
  overflow: hidden;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
}
.dibu > .banxin >.p4 > span {
  margin: 0 4px;
  color: #9c9c9c;
}
.dibu > .banxin >.p5 {
  padding-bottom: 8px;
  overflow: hidden;
  font-size: 12px;
  height: 35px;
}
.dibu > .banxin >.p5 > span {
  margin: 0 4px;
  color: #9c9c9c;
}
.dibu > .banxin >.p5 > span > b {
    margin-left: 8px;
}
.dibu > .jietu {
    height:80px;
    width: 1190px;
}
/* 楼层 */

